<template>
  <div class="siteWrapper">
    <div v-if="isLogin" :class="['siteLeftWrapper', { hideSidebar: !showSidebar }]">
      <a :href="site.homePage" class="siteTitleWrapper">
        <img src="https://www.verybugs.com/asset/favicon.png" alt="" class="siteTitleLogo">
        <h1 v-show="showSidebar" class="siteTitleText">{{ site.title }}</h1>
      </a>
      <div class="siteMenuWrapper">
        <el-menu
          :unique-opened="true"
          :default-active="$route.path"
          class="siteMenu"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu index="/runtime">
            <template #title>
              <i class="el-icon-location"></i>
              <span>运行报错</span>
            </template>
            <el-menu-item index="/runtime/h5" @click="$router.push('/runtime/h5')">H5报错</el-menu-item>
            <el-menu-item index="/runtime/app" @click="$router.push('/runtime/app')">APP报错</el-menu-item>
            <el-menu-item index="/runtime/service" @click="$router.push('/runtime/service')">服务报错</el-menu-item>
          </el-submenu>

          <el-submenu index="/log">
            <template #title>
              <i class="el-icon-menu"></i>
              <span>日志上报</span>
            </template>
            <el-menu-item index="/log/h5" @click="$router.push('/log/h5')">H5日志</el-menu-item>
            <el-menu-item index="/log/app" @click="$router.push('/log/app')">APP日志</el-menu-item>
            <el-menu-item index="/log/service" @click="$router.push('/log/service')">服务日志</el-menu-item>
          </el-submenu>

          <el-submenu index="/statistics">
            <template #title>
              <i class="el-icon-document"></i>
              <span>埋点上报</span>
            </template>
            <el-menu-item index="/statistics/h5" @click="$router.push('/statistics/h5')">H5日志</el-menu-item>
            <el-menu-item index="/statistics/app" @click="$router.push('/statistics/app')">APP日志</el-menu-item>
            <el-menu-item index="/statistics/service" @click="$router.push('/statistics/service')">服务日志</el-menu-item>
          </el-submenu>

          <el-submenu index="/setting">
            <template #title>
              <i class="el-icon-setting"></i>
              <span>功能设置</span>
            </template>
            <el-menu-item index="/setting/h5" @click="$router.push('/setting/h5')">H5日志</el-menu-item>
            <el-menu-item index="/setting/app" @click="$router.push('/setting/app')">APP日志</el-menu-item>
            <el-menu-item index="/setting/service" @click="$router.push('/setting/service')">服务日志</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <div class="btnToggleMenuWrapper" @click="toggleSidebarMenu">
        <i v-show="showSidebar" class="el-icon-d-arrow-left btnToggleSiteMenu"></i>
        <i v-show="!showSidebar" class="el-icon-d-arrow-right btnToggleSiteMenu"></i>
      </div>
    </div>
    <div class="siteRightWrapper">
      <!-- <Top v-if="isLogin"></Top> -->
      <div class="siteContentWrapper">
        <router-view v-slot="{ Component }">
          <Suspense>
            <component :is="Component" />
          </Suspense>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script>
// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
// import HelloWorld from './components/HelloWorld.vue' // eslint-disable-line
export default {
  name: 'App',
  components: {},
  data () {
    return {}
  },
  computed: {
    isLogin () { return !!this.$store.state.user.userId },
    user () { return this.$store.state.user },
    site () { return this.$store.state.site },
    showSidebar () { return this.$store.state.setting.showSidebar === '1' },
  },
  created () {
    if (this.isLogin === false) {
      // todo
    }
  },
  methods: {
    toggleSidebarMenu () {
      const { showSidebar } = this.$store.state.setting
      this.$store.commit('updateSetting', { showSidebar: showSidebar === '1' ? '0' : '1' })
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath) // eslint-disable-line
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath) // eslint-disable-line
    },
  },
}
</script>

<style lang="scss">
@import './styles/_utils.scss';
@import "./styles/reset.scss";
.siteWrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
}
.siteLeftWrapper {
  &.hideSidebar {
    width: $siteSidebarHideWidth !important;
    .siteTitleWrapper {
      .siteTitleLogo {
        padding: 0;
        margin-left: 7px;
      }
    }
    .siteMenuWrapper {
      .siteMenu {
        width: $siteSidebarHideWidth;
      }
      .el-menu-item {
        text-align: center;
        margin-left: -11px;
      }
      [class^=el-icon-] {
        margin-right: 0;
      }
    }
    .btnToggleMenuWrapper {
      margin-left: -8px;
    }
  }
  position: relative;
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  width: $siteSidebarWidth !important;
  height: 100%;
  background-color: rgb(84, 92, 100);
  overflow-x: hidden;
  overflow-y: auto;
  .siteTitleWrapper {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-left: -4px;
    height: $siteHeaderHeight;
    line-height: $siteHeaderHeight;
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;
    .siteTitleLogo {
      display: inline-block;
      vertical-align: middle;
      height: 32px;
      width: auto;
      border-radius: 50%;
    }
    .siteTitleText {
      display: inline-block;
      vertical-align: middle;
      height: 32px;
      line-height: 32px;
      margin-left: 12px;
      font-weight: 600;
      font-size: 18px;
      color: #fff;
    }
  }
  .siteMenuWrapper {
    display: block;
    flex: 1 1 0;
    overflow: hidden auto;
    width: 100%;
    .siteMenu {
      width: $siteSidebarWidth;
    }
  }
  .btnToggleMenuWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    box-sizing: border-box;
    .btnToggleSiteMenu {
      cursor: pointer;
      user-select: none;
      font-size: 18px;
      color: #fff;
    }
  }
}
.siteRightWrapper {
  display: inline-block;
  vertical-align: middle;
  flex: 1;
  height: 100%;
  background-color: #f0f2f5;
  overflow-x: hidden;
  overflow-y: auto;
  .siteContentWrapper {
    padding: 16px;
  }
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
</style>
